<template>
  <div>
    <div class="Pie" style="height: 230px; width: 220px" ref="chart"></div>
  </div>
</template>
    <script>
export default {
  name: "Pie",
  props: ["reach", "absence"],
  watch: {
    reach(newValue, oldValue) {
      console.log("Child prop changed:", newValue);
      this.initChartData();
      this.getChart();
    },
    absence(newValue, oldValue) {
      console.log("Child prop changed:", newValue);
      this.initChartData();
      this.getChart();
    },
  },
data() {
  return {
    option: {
      title: {
        text: "到课情况",
        textStyle: {
          color: "#5c93f2",
          fontSize: 18,
        },
        left: "center",
        top: "middle",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c}人 ({d}%)",
      },
      series: [
        {
          name: "人数",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "inside",
            formatter: "{b}\n{d}% ({c}人)",
            fontSize: 14,
            fontWeight: "bold",
            color: "#a83aa8", // 设置标签文字颜色，你可以根据需要调整
          },
          emphasis: {
            label: {
              show: true,
              color: "black",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 0,
              name: "缺勤",
              itemStyle: { color:  "rgb(142,179,244)" }, // 修改缺勤的颜色
            },
            {
              value: 0,
              name: "实到",
              itemStyle: { color: "rgb(251,154,224)" }, // 修改实到的颜色
            },
          ],
        },
      ],
    },
  };
},

  mounted() {
    this.initChartData();
    this.getChart();
    console.log(this.reach);
  },
  methods: {
    initChartData() {
      this.option.series[0].data[0].value = this.absence;
      this.option.series[0].data[1].value = this.reach;
    },
    getChart() {
      // 引用chart并初始化
      this.chart = this.$echarts.init(this.$refs.chart);
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
      //自适应
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>